<template>
	<ul class="list">
		<li class="item" 
			v-for="item of letters" 
			:key="item"
			:ref="item"
			@click="handleLetterClick"
			@touchstart="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
		>{{item}}</li>
	</ul>
</template>
<script>
export default {
  name: 'CityAlphabet',
  props:{
  	cities:Object
  },
  data (){
  	return{
  		touchStatus:false,
  		startY:0,
  	  	timer:null
  	}
  },
  updated (){
  	this.startY = this.$refs['A'][0].offsetTop;
  },
  computed:{
  	letters (){
  		const letters = [];
  		for(let i in this.cities){
  			letters.push(i)
  		}
  		return letters
  	}
  },
  methods:{
  	handleLetterClick (e){
  		// 通过$emit向父组件传值
  		this.$emit('change',e.target.innerText)
  	},
  	handleTouchStart (){
  		this.touchStatus = true
  	},
  	handleTouchMove (e){
  		if(this.touchStatus){
  			if(this.timer){
  				clearTimeout(this.timer)
  			}
  			this.timer = setTimeout(() =>{
  				const touchY = e.touches[0].clientY - 79;
	  			const index = Math.floor((touchY - this.startY) / 20);
	  			if(index >= 0 && index<this.letters.length){
	  				this.$emit('change',this.letters[index])
	  			} 
	  		},16)  						
  		}
  	},
  	handleTouchEnd (){
  		this.touchStatus = false
  	}
  }
}
</script>
<style scoped>
	.list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: .4rem;
		position: absolute;
		top:1.58rem;
		right:0;
		bottom: 0;
	}
	.item{
		text-align: center;
		line-height: .4rem;
		color: #00bcd4
	}
</style>